import 'package:flutter/material.dart';
import 'package:flutter_map_demo/configs/poi_search_base_config.dart';
import 'package:uikit/uikit.dart';

import '../../view_model/poi_search_cell_view_model.dart';
import '../poi_list/poi_cell.dart';

class EnterpriseRulePOIsViewModel extends ViewModel {
    var list = <POISearchCellViewModel>[].obs;
}

class EnterpriseRulePOIsPopWidget extends StatelessWidget {
  final List<POISearchCellViewModel> list;
  final POISearchBaseConfig config;
  final ValueChanged<POISearchCellViewModel> didSelectedCallback;
  final ValueChanged<POISearchCellViewModel> didClickShareButton;

  final FocusNode textFocusNode = FocusNode();
  final TextEditingController textController = TextEditingController();
  var viewModel = bindVM(EnterpriseRulePOIsViewModel());

  EnterpriseRulePOIsPopWidget({
    Key? key,
    required this.list,
    required this.didSelectedCallback,
    required this.config, required this.didClickShareButton,
  }) : super(key: key) {
    viewModel.list.value = list;
    textController.addListener(update);
  }

  void update() {
    var text = textController.text;
    if (text.isEmpty) {
      return;
    }

    List<POISearchCellViewModel> result = [];
    for (var model in list) {
      if (model.poiName.contains(text)) {
        result.add(model);
      }
    }
    viewModel.list.value = result;
  }

  bool showSearchBar(BuildContext context) {
    var allHeight = MediaQuery.of(context).size.height;
    var height = MediaQuery.of(context).size.height - 52 - MediaQuery.of(context).padding.top;
    var contentHeight = 72.5 * list.length;
    if (contentHeight > height) {
      return true;
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    var showBar = showSearchBar(context);
    return Column(
      children: [
        const Expanded(child: SizedBox()),
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(24.0),
              topRight: Radius.circular(24.0),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 16,),
              Row(
                children: [
                  const SizedBox(width: 16,),
                  const Text(
                    "全部规范地点",
                    style: TextStyle(
                      color: LucyColors.lucy_02102A,
                      fontWeight: LucyFonts.medium,
                      fontSize: LucyFonts.size_20
                    ),
                  ),
                  const Expanded(child: SizedBox()),
                  T3GestureDetector(
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                    child: SizedBox(
                      width: 24,
                        height: 24,
                        child: T3Image.t3assets(T3AssetsName.icon_close)
                    ),
                  ),
                  const SizedBox(width: 16,),
                ],
              ),
              if (showBar)
                ...[
                  const SizedBox(height: 12,),
                  buildSearchBar(context),
                ],

              const SizedBox(height: 12,),
              Obx(() {
                var realHeight = 72.5 * viewModel.list.value.length;
                var maxHeight = MediaQuery.of(context).size.height - 156;
                var height = showBar ? maxHeight : realHeight;
                return Container(
                  color: Colors.white,
                  width: double.infinity,
                  height: height,
                  child: CustomScrollView(
                      slivers: buildCells(viewModel.list.value),
                  ),
                );
              }),
            ],
          )
        ),
      ],
    );
  }

  Widget buildSearchBar(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width - 32,
      height: 40,
      decoration: const BoxDecoration(
        // color: Colors.red,
        color: Color(0xFFF7F8FC),
        borderRadius: BorderRadius.all(Radius.circular(12.0)),
      ),
      child: TextField(
        focusNode: textFocusNode,
        textAlign: TextAlign.start,
        controller: textController,
        keyboardType: TextInputType.text,
        onTapOutside: (point) {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        maxLines: 1,
        style: const TextStyle(
          color: Colors.black,
          fontWeight: LucyFonts.regular,
          fontSize: LucyFonts.size_14,
        ),
        textInputAction: TextInputAction.done,
        showCursor: true,
        cursorWidth: 2,
        cursorColor: const Color(0xFFFF8533),
        decoration: InputDecoration(
          isCollapsed: true,
          contentPadding: const EdgeInsets.all(8),
          border: const OutlineInputBorder(),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(style: BorderStyle.none),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(style: BorderStyle.none),
          ),
          fillColor: const Color(0xfff7f8fc),
          filled: false,
          focusColor: Colors.white,
          hoverColor: Colors.transparent,
          hintMaxLines: 1,
          hintStyle: const TextStyle(
              color: Color(0xFFA5A7AD),
              fontSize: 14,
              fontWeight: LucyFonts.regular
          ),
          hintText: "搜索规范地点",
          prefixIcon: T3Image.t3assets(T3AssetsName.icon_search),
        ),
      )
    );
  }

  List<Widget> buildCells(List<POISearchCellViewModel> filter) {
    List<Widget> slivers = [];
    slivers.add(SliverList(delegate: SliverChildBuilderDelegate(
        childCount: filter.length, (context, index) {
      final e = filter[index];
      return T3GestureDetector(
        onTap: () {
          didSelectedCallback(e);
          Navigator.of(context).pop();
        },
        child: SizedBox(
          height: 72.5,
          child: T3POICell(
            vm: e,
            config: config,
            onSelectSubPoi: (value) {
              e.selectedSubPOIIndex = value;
              didSelectedCallback(e);
              Navigator.of(context).pop();
            },
            keyword: null,
            clickShareButton: (poi) {
              didClickShareButton(poi);
              Navigator.of(context).pop();
            },
          ),
        ),
      );})
    ));
    return slivers;
  }
}


